<template>
  <!--新增-->
  <div class="edu-page-warp">
    <DesignCard :title="$t('graduationDesign.assignSubject')" :showExpand="false">
      <el-row>
        <table class="add-special-assign" cellpadding="0" cellspacing="0">
          <tbody>
            <tr>
              <td class="td-label">{{$t('graduationDesign.studentId')}}</td>
              <td>
                <el-input @keyup.enter.native="onSearch" @change="handleStudentIdChange" clearable v-model="studentForm.studentId">
                  <el-button slot="append" @click="onSearch" icon="el-icon-search"></el-button>
                </el-input>
              </td>
            </tr>
            <tr>
              <td class="td-label">{{$t('graduationDesign.name')}}</td>
              <td class="td-value">{{studentForm.studentName}}</td>
            </tr>
            <tr>
              <td class="td-label">{{$t('graduationDesign.graduationYear')}}</td>
              <td class="td-value">{{studentForm.grade}}</td>
            </tr>
            <tr>
              <td class="td-label">{{$t('graduationDesign.college')}}</td>
              <td class="td-value">{{studentForm.collegeI18n}}</td>
            </tr>
            <tr>
              <td class="td-label">{{$t('graduationDesign.major')}}</td>
              <td class="td-value">{{studentForm.subjectName}}</td>
            </tr>
            <tr>
              <td class="td-label">{{$t('graduationDesign.direction')}}</td>
              <td class="td-value">{{studentForm.directionName}}</td>
            </tr>
          </tbody>
        </table>
      </el-row>
      <el-row class="add-assign_bottom_btn">
        <el-col>
          <el-button type="primary" @click="onAssign">{{$t('graduationDesign.assignSubject')}}</el-button>
        </el-col>
      </el-row>
    </DesignCard>
  </div>
</template>
<script>
import API from "common/src/api/underGraduationDesign/reviewSubject";

export default {
  name: '',
  props: {
    calendarId: {
      type: String,
      default: ''
    }
  },
  data(){
    return {
      api: API,
      studentForm: {}
    };
  },
  mounted() {},
  methods: {
    handleStudentIdChange(){
      this.studentForm.studentName = "";
      this.studentForm.grade = "";
      this.studentForm.collegeI18n = "";
      this.studentForm.subjectName = "";
      this.studentForm.directionName = "";
    },
    onSearch(){
      if(!this.studentForm.studentId && this.studentForm.studentId !== "0") {
        this.$eduAlert(this.$t('graduationDesign.studentIdCannotEmpty'), this.$t('graduationDesign.prompt'));
        return false;
      }
      this.api.getStudentInfo(this.studentForm.studentId).then(res=>{
        this.studentForm = { ...res.data };
      }).catch(err=>{});
    },
    onAssign(){
      if (this.studentForm.studentId && this.studentForm.studentName) {
        const params = Object.assign({}, this.studentForm, {calendarId: this.calendarId})
        this.api.insertSpecial(params).then(res => {
          this.$emit('add-special-assign', params);
        }).catch(err=>{});
      } else {
        this.$eduAlert(this.$t('graduationDesign.studentInfoCannotEmpty'), this.$t('graduationDesign.prompt'));
        return;
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.add-special-assign {
	text-align: center;
	margin: 3px auto;
    margin-bottom: 32px;
	width: 50%;
	border-color: #c0c4cc;
	border-style: solid;
	border-width: 0 1px 1px 0;
	td {
		padding: 6px;
		border-color: #c0c4cc;
		border-style: solid;
		border-width: 1px 0 0 1px;
	}
	.td-label {
		width: 30%;
		text-align: right;
		background-color: #f5f7fa;
	}
  .td-value {
    text-align: left;
		padding-left: 15px;
	}
}
.add-assign_bottom_btn {
  text-align: center;
}
</style>
